<template>
  <div class="header">
    <div class="header-icon" @click="expand">
      <span class="icon"></span>
      <div>营养价值表</div>
    </div>
    <el-row v-if="headerList.length" class="header-list">
      <div v-for="item in headerList" :key="item.id">
        {{item.label}}
      </div>
    </el-row>
    <div class="header-tool">
      <el-dropdown>
        <span class="tool-one">
          hi！{{(10>=new Date().getHours()>6) ?'上午好': (13>=new Date().getHours()>10) ? '中午好' : (17>=new Date().getHours()>13) ? '下午好': '晚上好'}}
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.native="go">
            gitee源码仓库
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
    </div>
  </div>
</template>

<script>
export default {
  props: {
    headerList: {
      type: Array,
      default: ()=> {
        return [
          {
            id:0,
            label: '高考必胜！'
          }
        ]
      }
    }
  },
  computed: {
    getAsideType() {
      return this.$store.state.asideType
    }
  },
  methods: {
    go (){
      window.open('https://gitee.com/le_shui/nutritional-value-list.git')
    },
    expand () {
      this.$store.commit('setAsideType',this.getAsideType?0:1)
    }
  }

}
</script>

<style lang="less">
.header {
  clear: both;
  height: 100%;
  width: 100%;
  div {
    display: inline-block;
  }
  .header-icon {
    float: left;
    height: 48px;
    line-height: 48px;
    width: 200px;
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    cursor: pointer;
    &:hover {
      font-weight: 700;
      color: #fff;
    }
    .icon {
      display: inline-block;
      width: 30px;
      height: 30px;
      margin: 9px 20px 9px 20px;
      background: url('~@/assets/icon.png') no-repeat center center;
      background-size: 26px 30px;
    }
    div {
      display: inline-block;
      vertical-align: top;
    }
  }
  .header-list {
    height: 100%;
    width: calc(100% - 420px);
    div {
      width:100% ;
      text-align: center;
      padding: 0 10px;
      color: white;
      font-size: 24px;
      font-weight: 700;
    }
  }
  .header-tool {
    float: right;
    height: 100%;
    width: 200px;
    text-align: end;
    padding-right: 20px;
    .tool-one {
      float: right;
      cursor: pointer;
      color: #fff;
    }
  }
}
</style>